<template>
  <div>
    <div class="cardmessage">
      <a-row style="padding-top:10vh;margin-bottom: 20px;">
        <!-- <a-col :xs="{ span : 24 }" :sm="{ span:6 }" class="formGroupTitle">确认分账信息</a-col> -->
      </a-row>
      <a-form :form="cashform" @submit="handleSubmit">
        <div style="padding-top: 10px">
          <a-form-item label="合计分账笔数" v-bind="formItemLayout">
            <div class="cardmsg">{{total}}笔</div>
          </a-form-item>

          <a-form-item label="合计分账金额" v-bind="formItemLayout">
            <div class="cardmsg">
              <span
                style="color: #279e71;font-size:18px;font-weight: bolder;"
              >{{totalAmount | amountfilter}}</span>&ensp;元
            </div>
          </a-form-item>
          <a-form-item label="将从账户余额中扣除" v-bind="formItemLayout">
            <div class="cardmsg">
              <span
                style="color: #279e71;font-size:18px;font-weight: bolder;"
              >{{totalAmount | amountfilter}}</span>&ensp;元
            </div>
          </a-form-item>
          <a-form-item label="支付密码" v-bind="formItemLayout">
            <div id="paypwd">
              <vue-pay-pwd
                :isCursor="isCursor"
                :pwdWidth="250"
                :pwdHeight="38"
                :getPassword="payPw"
              ></vue-pay-pwd>&ensp;&ensp;
              <div>
                <router-link
                  style="font-size:14px;color: #156ec1;"
                  to="/per/safeset/modifypayindex"
                >忘记密码？</router-link>
              </div>
            </div>
          </a-form-item>
          <div>
            <a-row>
              <a-col
                :xs="{ span : 24 }"
                :sm="{ span:17,offset:7 }"
                style="text-align: left;margin-bottom: 15px;"
              ></a-col>
            </a-row>
            <a-form-item label="手机号" v-bind="formItemLayout">
              <div style="text-align: left;">
                {{mobileNo| mobileNofilters}}
                <a-button
                  style="margin-left: 20px;color:#279e71;border-color:#279e71;font-size: 14px;"
                  @click="sendcode"
                  v-if="issend"
                >发送验证码</a-button>
                <a-button
                  style="margin-left: 20px;"
                  v-if="!issend"
                  disabled
                  type="primary"
                >{{ count }}s后可再次发送</a-button>
              </div>
            </a-form-item>
            <a-form-item label="验证码" :label-col="{ span: 6 }" :wrapper-col="{ span: 6,offset:1 }">
              <a-input
                v-decorator="[
                      'usercode',
                      { rules: [{
                    required: true,
                    whitespace: true,
                    message: '请输入验证码' },{validator: validateCode}],
                    validateTrigger: 'blur'
                    }
                ]"
                size="large"
                placeholder="请输入验证码"
              ></a-input>
            </a-form-item>
          </div>
        </div>

        <a-row>
          <a-col :xs="{ span : 24 }" :sm="{ span:12,offset:7 }">
            <div class="next-ok">
              <a-button type="primary" :loading="loading" html-type="submit">确认</a-button>

              <div style="margin-left: 15px;">
                <router-link style="color:#156ec1;" to="/Uploadplan">取消</router-link>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-form>
      <a-modal centered :closable="false" :footer="null" :maskClosable="false" v-model="visible">
        <div class="aicon">
          <a-icon type="check-circle" />
        </div>
        <div class="aicon_text">分账提交成功</div>
        <div style="text-align: center;"><a-button type="primary" @click="tosucc">确认</a-button></div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import api from "@/common/api";
import Vue from "vue";
import { JSEncrypt } from "jsencrypt";
import vuePayPwd from "vue-pay-pwd";
export default {
  data() {
    return {
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18, offset: 1 },
          md: { span: 10, offset: 1 }
        }
      },
      totalAmount: "",
      total: "",
      mobileNo:"",
      batchNo:"",
      loading:false,
      Transfer: "",
      amountSum: "",
      phoneVerify: false,
      visible: false,
      phonenum: "",
      cardusername: "",
      cardname: "",
      cardid: "",
      cashform: this.$form.createForm(this),
      issend: true,
      userpw: "",
      isCursor: true, //是否开启光标
      count: 30,
      codeMsg: "获取验证码",
      timer: "",
      buttonStyle: {
        background: "#279e71"
      },
      memberType: "",

    };
  },
  filters: {
    mobileNofilters(value) {
      if (value) {
        var reg = /^(\d{3})\d{4}(\d{4})$/;
        return value.replace(reg, "$1****$2");
      }
    },
    amountfilter(value) {
      return parseFloat(value / 100).toFixed(2);
    }
  },

  created() {
    this.getParams();
  },

  methods: {
    payPw(pw) {
      console.log("获取支付密码", pw);
      this.userpw = pw;
    },
    validateCode(rule, value, callback) {
      // let reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g')
      if (value && !/^[0-9]*[1-9][0-9]*$/.test(value)) {
        /* eslint-disable-next-line */
        this.usercode = false;
        callback("请输入数字");
        return;
      } else {
        //console.log(value);
        callback();
      }
    },
    handleSubmit(e) {
      e.preventDefault();
      if (!this.userpw) {
        this.$message.warning("请输入密码！");
        return;
      } else {
        if (this.userpw.length < 6) {
          this.$message.warning("请输入正确密码！");
          return;
        }
      }
      
        this.cashform.validateFields((err, values) => {
          if (!err) {
            console.log(values.usercode);
           if(!values.usercode){
             this.$message.warning("验证码！");
              return;
           }
           this.loading=true;
           var params = { scope: "rechargeDivideAccount", key: this.mobileNo}
            api.fetchPubKey(
              params,
              res => {
                var pass = this.userpw;
                
                // console.log(this.userpw);
                pass = api.getEncryptData(res.data.pubKey, pass);

                console.log("pass",pass);
                console.log("code", values.usercode);
                console.log("key", this.mobileNo);
                console.log("batchNo", this.batchNo);

                this.$axios
                  .post("/agent/rechargeDivideAccount/confirmPlan", {
                    batchNo: this.batchNo,
                    code: values.usercode,
                    payPassword: pass,
                    key: this.mobileNo

                  })
                  .then(res => {
                    this.loading=false;
                    console.log(res);
                    if (res.data.code == "OK") {
                      //   this.showConfirm();
                      this.visible = true;
                    } else {
                      this.$message.error(res.data.message);
                    }
                  });
              },
              error => {
                this.loading=false;
                
              }
            );
          }
        });
    },
    getParams() {
      this.totalAmount = this.$route.params.totalAmount;
      this.total = this.$route.params.total;
      this.mobileNo = this.$route.params.mobileNo;
      this.batchNo = this.$route.params.batchNo;
    },

    sendcode() {
      const TIME_COUNT = 30;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.issend = false;
        this.$axios
          .get("/agent/customer/org/bank/mobile/vcode/" + this.mobileNo)
          .then(res => {
            console.log(res);
            if(res.data.code == "OK"){

            }else{
              this.$message.warning(res.data.message)
            }
          });
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.issend = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    showConfirm() {
      this.$confirm({
        title: "Do you want to delete these items?",
        content:
          "When clicked the OK button, this dialog will be closed after 1 second",
        onOk() {
          return new Promise((resolve, reject) => {
            setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
          }).catch(() => console.log("Oops errors!"));
        },
        onCancel() {}
      });
    },
    tosucc() {
      this.visible = false;
      this.$router.push({ path: "/Queryaccount" });
    }
  }
};
</script>

<style scoped>
.cardmessage {
  font-size: 16px;
}

.cardmsg {
  text-align: left;
}

#paypwd {
  display: flex;
  flex-direction: row;
}

.next-ok {
  padding-top: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.formGroupTitle {
  font-size: 20px;
  font-weight: 600;
  text-align: right;
}
.aicon {
  width: 100%;
  height: 160px;
  color: #387cfa;
  font-size: 90px;
  text-align: center;
}
.aicon_text{
    text-align: center;
    font-size: 23px;
    font-weight: bolder;
    height: 90px;
}
</style>